
<template>
  <div>
      <el-header style="background-color:#fff; text-align: left; font-size: 12px">
        <div class="toolbar">
            <div class="search">
                <el-input type="text" placeholder="请输入内容" v-model="search" clearable @clear="getwuliu" />
                <el-button @click="getsearch"><el-icon><search /></el-icon></el-button>
            </div>
   
        </div>
      </el-header>
      <div class="container">
          <el-table :data="tickList" fit="true" height=630 style="padding: 10px 30px;">
          <el-table-column prop="openid" label="openid" >
            <template #default=scope>
              <el-input type="text" v-model="scope.row.openid" v-show="scope.row.edit" />
              <span v-show="!scope.row.edit">{{scope.row.openid}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="solution" label="反馈" width="200">
            <template #default=scope>
              <el-input type="text" v-model="scope.row.solution" v-show="scope.row.edit" />
              <span v-show="!scope.row.edit">{{scope.row.solution}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="contact" label="联系方式" width="150">
            <template #default=scope>
              <el-input type="text" v-model="scope.row.contact" v-show="scope.row.edit" />
              <span v-show="!scope.row.edit">{{scope.row.contact}}</span>
            </template>
          </el-table-column>
        
          <el-table-column  label="功能"  fixed="right" width="300">
            <template #default="scope">
              <el-button type="warning" size="mini" @click="topmove(scope.row,scope.$index)">置顶</el-button>
              <!-- <el-button type="warning" size="mini" @click="edit(scope.row)">编辑</el-button> -->
              <!-- <el-button type="primary" size="mini" @click="save(scope.row)">保存</el-button> -->
              <el-button type="danger" size="mini" @click="del(scope.row)">删除</el-button>
            </template>
        </el-table-column>
          </el-table>
      <div class="block">
      <!-- 分页 -->
      <el-pagination
        
        style="background-color:aliceblue;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.pagenum"
        :page-sizes="[5, 8, 9]"
        :page-size='query.pagesize'
        layout="total, sizes, prev, pager, next, jumper"
        :total="query.total">
      </el-pagination>
      </div>
      
      </div>
      
  
  </div>
      </template>
      
      <script>
  
      
        export default {
          data() {
            var checkMail = (rule, value, callback) => {
              if (!value) {
                return callback(new Error('不能为空'));
              }
              callback()
            };
            var checkuser = (rule, value, callback) => {
              if (value === '') {
                callback(new Error('不能为空'));
              } else {
                callback();
              }
            };
            var checkPhone = (rule, value, callback) => {
              if (value === '') {
                callback(new Error('不能为空'));
              }else {
                  callback();
              }
            };
           
            return {
              search:"",
              tableData: [],
              dialogTableVisible:false,
              ruleForm: {
                openid: '',
                solution: '',
                contact: '',
                
              },
              query:{
                pagenum:1, //当前页码
                pagesize:5, //每页显示条数
                total:0
              },
      
              tickList:[],   //当前页数据
            
             rules: {
                openid: [
                  { validator: checkuser, trigger: 'blur' }
                ],
                solution: [
                  { validator: checkPhone, trigger: 'blur' },
                ],
                contact: [
                  { validator: checkMail, trigger: 'blur' },
                ]
              }
              
            }
          },
          methods: {
              //置顶
              topmove(row,index){
                  if(this.tickList){
                      this.tickList.splice(index,1)
                      this.tickList.unshift(row)
                  }
              },
  
            //检查token
            checktoken(){
              let token = localStorage.getItem('token')
              this.$axios({
                method:'post',
                url:'token',
                data:token,
                headers:{'Authorization': localStorage.getItem('token')}
              }).then(res=>{
                let {code,msg} = res.data
                if(code==401){
                  this.$router.push({name:'login'})
                  this.$message.error(msg)
                }
      
              })
            },
  
            //搜索
            async getsearch(){
              let {data} = await this.$axios.post('search',{key:this.search})
              console.log(data);
              this.tableData = data.msg
              this.query.total = data.msg.length
              this.getPageInfo()  //获取当前页数据
            },
  
            //当前页数据
            getPageInfo(){
              //清空tickList中的数据
              this.tickList=[];
              // 获取当前页的数据
              for(let i=(this.query.pagenum-1)*this.query.pagesize;i<this.query.total;i++){
                //把遍历的数据添加到tickList里面
                if(this.tableData){
                  let data = this.tableData[i]
                  this.tickList.push(data);
                }
                //判断是否达到一页的要求
                if(this.tickList.length===this.query.pagesize)break;
              }},
            //当页码或页面大小改变时触发回调
            handleSizeChange(newSize) {
              this.query.pagesize = newSize
              this.getPageInfo()
      
            },
            handleCurrentChange(newPage) {
              this.query.pagenum=newPage
              this.getPageInfo()
      
            },
              //编辑用户数据
              edit(row){
                row.edit = true
      
              },
              //保存
              async save(row){
      
                let {data} = this.$axios.post('updatawuliu',row)
                  console.log(data);
                row.edit = false
              },
      
            //获取列表
              async getwuliu(){
                  let {data} = await this.$axios.get('getwuliu')
  
                  if(data.code == 200){
                      this.tableData = data.msg
                      this.query.total = data.msg.length
                      this.getPageInfo()  //获取当前页数据
                  }
      
              },
              //删除
              async del({id}){
                let {data} = await this.$axios.post('deletewuliu',{id})
                console.log(data);
                if(data.code==200){
                  this.getwuliu()
                }
              },
      //新增数据
              submitForm(formName) {  
              this.$refs[formName].validate(async (valid) => { 
                if (valid) {
                  let {data} = await this.$axios.post('addwuliu',this.ruleForm)
                  if(data.code==200){
                    this.getwuliu()
                    this.dialogTableVisible =false
      
                  }
                }
              });
            },
            resetForm(formName) {
              this.$refs[formName].resetFields();
            },
      
          },
          mounted(){
              this.getwuliu()
              this.checktoken()
          }
        };
      </script>
      <style scoped>
      .container{
          margin: 0 0;
          padding: 0 0;
      }
      .toolbar{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        right: 20px;
      }
      .search{
        display: inline-flex;
        align-items: center;
        margin-right: 20px;
      }
      </style>